<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>绝对定位布局</title>

</head>

<body style="margin: 0px;padding: 0px;">
    <div class="layoutroot" style="position: relative; min-height: 100vh;">
        <header style="position: absolute; width:100%;height:1.5em;background-color:blanchedalmond;">header</header>
        <nav style="position:absolute; width:100%;height:1.5em;top:1.5em;background-color:lightblue;">nav</nav>
        <!--calc()函数里面的表达式，算符，例如减号，前后必须有空格-->
        <aside class="leftaside"
            style="position:absolute; min-height:calc(100vh - 4.5em);top:3em;left:0%;right:70%;background-color: rgba(144, 238, 144, 1);">
            aside
            class="leftaside"
        </aside>
        <aside class="rightaside"
            style="position:absolute; min-height:calc(100vh - 4.5em);top:3em;left:70%;right:0%;background-color:rgba(144, 238, 144, 1);">
            aside
            class="rightaside"
        </aside>
        <main style="position:absolute; min-height:calc(100vh - 4.5em);top:3em;left:30%;right:30%;background-color:lightsalmon;">
            main
            <p>采用绝对定位的布局，所有栏都绝对定位。中间的三栏，如果过常，超出父节点设定的最小值，
                那么，footer是不会自适应往下移动的。原因是，footer相对于父容器定位，
                而父容器完全不知道这些绝对定位元素的存在，它只有预设的min-height这么高。
                假设这个父容器就是我们的浏览器工作区的化，相当于我们有了一个浮动的页脚。
            </p>
            <p>采用绝对定位的布局，所有栏都绝对定位。中间的三栏，如果过常，超出父节点设定的最小值，
                那么，footer是不会自适应往下移动的。原因是，footer相对于父容器定位，
                而父容器完全不知道这些绝对定位元素的存在，它只有预设的min-height这么高。
                假设这个父容器就是我们的浏览器工作区的化，相当于我们有了一个浮动的页脚。
            </p>
            <p>采用绝对定位的布局，所有栏都绝对定位。中间的三栏，如果过常，超出父节点设定的最小值，
                那么，footer是不会自适应往下移动的。原因是，footer相对于父容器定位，
                而父容器完全不知道这些绝对定位元素的存在，它只有预设的min-height这么高。
                假设这个父容器就是我们的浏览器工作区的化，相当于我们有了一个浮动的页脚。
            </p>
            <p>采用绝对定位的布局，所有栏都绝对定位。中间的三栏，如果过常，超出父节点设定的最小值，
                那么，footer是不会自适应往下移动的。原因是，footer相对于父容器定位，
                而父容器完全不知道这些绝对定位元素的存在，它只有预设的min-height这么高。
                假设这个父容器就是我们的浏览器工作区的化，相当于我们有了一个浮动的页脚。
            </p>
            <p>采用绝对定位的布局，所有栏都绝对定位。中间的三栏，如果过常，超出父节点设定的最小值，
                那么，footer是不会自适应往下移动的。原因是，footer相对于父容器定位，
                而父容器完全不知道这些绝对定位元素的存在，它只有预设的min-height这么高。
                假设这个父容器就是我们的浏览器工作区的化，相当于我们有了一个浮动的页脚。
            </p>
        </main>
        <footer
            style="position: fixed; height:1.5em; top:calc(100vh - 1.5em);width:100vw;background-color: mediumaquamarine;">
            footer</footer>
    </div>
</body>

</html>